<template>
  <div class="left flexC flex1">
    <slot>
      <div class="left_top flex1">
        <div class="manwomen_bg flex JustifyContentSA AlignItemsC">
          <div class="flex AlignItemsC" style="margin-top: 2rem;  padding-left: 2rem;">
            <div class="women"></div>
            <div class=" flexC flex1" style="padding-left: 1rem;">
              <p class="colorF font_s20">女医生</p>
              <p class="font_s24 font_w4 " style="color: #fb9ed8;">{{ Man }}%</p>
            </div>
          </div>
          <div class="xuxian"></div>
          <div class="flex AlignItemsC" style="margin-top: 2rem; padding-right:2rem;">
            <div class="man"></div>
            <div class=" flexC flex1" style="padding-left: 1rem;">
              <p class="colorF font_s20">男医生</p>
              <p class="font_s24 font_w4 " style="color: #33ebfe;">{{ Woman }}%</p>
            </div>
          </div>
        </div>
      </div>
     <div class="left_cen flexC flex1 AlignItemsC JustifyContentC ">
       <h2 style="color: rgb(255,255,255,0.8);">统计</h2>
       <div class="flex">
         <div class="title flexC ">
           <p class="colorF font_s18">今日服务人数</p>
           <p class="font_s24 font_wb" style="color: #00CDF2;">{{ TotalDoctor }}</p>
         </div>
         <div class="title flexC " s>
           <p class="colorF font_s18 ">今日呼叫数</p>
           <p class="font_s24 font_wb" style="color: #00CDF2;">{{ TodayCall }}</p>
         </div>
       </div>
     </div>
      <div class="left_bottom Bold colorF  flex2">
        <div class="flex" style="margin-top:6rem ; padding: 3rem; ">
          <div class=" flexC textC flex1 second JustifyContentFE" style="padding-bottom: 0.1rem;">
            <p class="font_s18">{{ mapName[1] }}</p>
            <p class="font_s16">{{ mapNum[1] }}</p>
          </div>
          <div class="flex1 flexC textC  first JustifyContentFE" style="padding-bottom: 0.1rem;">
            <p class="font_s20 font_w4 ouhai">{{ mapName[0] }}</p>
            <p class=" font_s16">{{ mapNum[0] }}</p>
          </div>
          <div class="flex1 flexC textC  third JustifyContentFE" style="padding-bottom: 0.1rem;">
            <p class="font_s18">{{ mapName[2] }}</p>
            <p class="font_s16">{{ mapNum[2] }}</p>
          </div>
        </div>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'left',
  props: ['query'],
  data () {
    return {
      // 男女
      Woman: '',
      Man: '',
      // 今日服务人数
      TotalDoctor: 0,
      // 今日就诊人数
      TodayCall: 0,
      // top榜
      mapName: [],
      mapNum: []
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 男女

      this.$http.post(this.$api.Manwoman.manwoman, 'jdcode=' + this.query.cityThreeJdCodeKey, true).then(result => {
        let arr = result.data.response.doctorSexProportion
        this.Woman = arr.Woman
        this.Man = arr.Man
        // console.log('14.获取男女医生比例', arr);
      })
      this.$http.post(this.$api.Qyys.qyys, 'jdcode=' + this.query.cityThreeJdCodeKey, true).then(result => {
        this.TotalDoctor = result.data.response.TotalDoctor
        // console.log(' 6. 医生总数', result.data.response.TotalDoctor)
      })

      this.$http.post(this.$api.TodayCall.todayCall, 'jdcode=' + this.query.cityThreeJdCodeKey, true).then(result => {
        this.TodayCall = result.data.response.TodayCall
        // console.log(' 17.今日呼叫数量', result.data.response)
      })
      this.$http.post(this.$api.HospitalOrder.hospitalOrder, 'jdcode=', true).then(result => {
        let arr = result.data.response.HospitalOrder
        console.log('18.获取卫生院完成的工单数', arr)
        let newArr = arr.slice(0, 3)
        for (let val of newArr.values()) {
          this.mapName.push(val.hospital)
          this.mapNum.push(val.num)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  height: 100%;
  .left_top {
    background: url(../../../assets/img/home/datasea/right1.png) no-repeat;
    background-size: 100% 93%;
    .manwomen_bg {
      height: 13.5rem;
      width: 30rem;
    }
    .women {
      width: 3.3rem;
      height: 4.3rem;
      background: url(../../../assets/img/home/datasea/women.png) no-repeat;
      background-size: 100% 100%;
    }

    .xuxian {
      margin-top: 2rem;
      width: 0.0625rem;
      height: 6rem;
      background: url(../../../assets/img/home/datasea/3.png);
      background-size: 100% 100%;
    }
    .man {
      width: 3.3rem;
      height: 4.3rem;
      background: url(../../../assets/img/home/datasea/man.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .left_cen {
    background: url(../../../assets/img/home/datasea/left1.png) no-repeat;
    background-size: 100% 93%;
    .title {
      padding: 1.2rem;
      margin: 1.5rem;
      background: url(../../../assets/img/home/datasea/2.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .left_bottom {
    background: url(../../../assets/img/zeya/kuang.png) no-repeat;
    background-size: 100% 100%;

    .ranking-top {
      margin-top: 6.5rem;
      margin-bottom: 3rem;
    }

    .second {
      background: url(../../../assets/img/home/datasea/er.png) no-repeat;
      background-size: 100% 100%;
      height: 12rem;
      margin-right: -0.8rem;
      margin-top: 2rem;
    }
    .first {
      background: url(../../../assets/img/home/datasea/yi.png) no-repeat;
      background-size: 100% 100%;
      height: 15rem;
    }

    .third {
      background: url(../../../assets/img/home/datasea/san.png) no-repeat;
      background-size: 100% 100%;

      height: 12rem;
      margin-left: -0.8rem;
      margin-top: 2rem;
    }
  }
}
</style>
